<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <style>
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .sub-list {
        display: none;
        position: absolute;
        /* left: 0; */
      }
      .sub-list.active {
        display: flex;
      }
      .arr {
        display: none;
        position: absolute;
        top: -21px;
        left: 0;
        z-index: 10;
        background: url("./img/nav_bg.png") no-repeat 0 -262px;
        width: 10px;
        height: 5px;
      }
      .sub-item {
        position: relative;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background-position: 0 0;
        cursor: pointer;
        font-size: 12px;
        color: black;
      }
      .sub-item:first-child::before {
        content: "";
        position: absolute;
        left: -8px;
        top: 0;
        background: url("./img/nav_bg.png") no-repeat 0 -180px;
        width: 10px;
        height: 27px;
      }
      .sub-list.active .sub-item:last-child::before {
        content: "";
        position: absolute;
        right: -5px;
        top: 0;
        background: url("./img/nav_bg.png") no-repeat -98px -234px;
        width: 10px;
        height: 28px;
        z-index: 10;
      }
      .sub-item::after {
        content: "|";
        position: absolute;
        right: 0;
        top: 0;
      }
      .sub-item .sub-title {
        background: url("./img/nav_bg.png") no-repeat 0 -207px;
        width: 80px;
      }
      .sub-nav {
        position: relative;
        display: inline-block;
        margin-top: 10px;
        width: 100%;
      }
      nav {
        position: relative;
        width: 963px;
        margin: 0 auto;
      }
      .nav-list {
        display: flex;
        justify-content: center;
      }
      .nav-list .nav-item:nth-child(1)::before {
        content: "";
        position: absolute;
        left: -8px;
        top: 0;
        background: url("./img/nav_bg.png") no-repeat 0 -36px;
        width: 10px;
        height: 36px;
      }
      .nav-list .nav-item:nth-child(8)::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        background: url("./img/nav_bg.png") no-repeat -93px -72px;
        width: 15px;
        height: 36px;
        z-index: 9;
      }
      .nav-item {
        position: relative;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-position: 0 0;
        color: white;
        cursor: pointer;
      }
      .nav-item::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 12px;
        height: 36px;
        background: url("./img/nav_bg.png") no-repeat 0 -108px;
      }
      .nav-item .nav-title {
        background: url("./img/nav_bg.png") no-repeat 0 0;
        width: 120px;
      }
      .sub-item .sub-title:hover{
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul class="nav-list">
        <li class="nav-item">
          <div class="nav-title">站长之家</div>
          <ul class="sub-list">
            <!-- <li class="sub-item">
              <div class="sub-title"></div>
            </li> -->
          </ul>
        </li>
        <li class="nav-item">
          <div class="nav-title">行业资讯</div>
          <ul class="sub-list">
            <li class="sub-item">
              <div class="sub-title">业界动态</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">收购融资</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">门户动态</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">搜索引擎</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">网络游戏</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">电子商务</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">广告媒体</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">厂商开发</div>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <div class="nav-title">站长在线</div>
          <ul class="sub-list">
            <li class="sub-item">
              <div class="sub-title">站长报道</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">好站推荐</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">站长聚会</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">站长访谈</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">站长茶馆</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">网站排行</div>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <div class="nav-title">网站运营</div>
          <ul class="sub-list">
            <li class="sub-item">
              <div class="sub-title">建站经验</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">策划盈利</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">搜索优化</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">网站推广</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">免费资源</div>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <div class="nav-title">设计在线</div>
          <ul class="sub-list">
            <li class="sub-item">
              <div class="sub-title">酷站设计</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">网页设计</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">WEB标准</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">视频处理</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">设计活动</div>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <div class="nav-title">网络编程</div>
          <ul class="sub-list">
            <li class="sub-item">
              <div class="sub-title">Asp编程</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">Php编程</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">.Net编程</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">Xml编程</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">Access编程</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">Mssql编程</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">Mysql编程</div>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <div class="nav-title">联盟资讯</div>
          <ul class="sub-list">
            <li class="sub-item">
              <div class="sub-title">联盟动态</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">联盟介绍</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">联盟点评</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">网赚技巧</div>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <div class="nav-title">服务器</div>
          <ul class="sub-list">
            <li class="sub-item">
              <div class="sub-title">Web服务器</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">Flp服务器</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">Mall服务器</div>
            </li>
            <li class="sub-item">
              <div class="sub-title">Dns服务器</div>
            </li>
          </ul>
        </li>
      </ul>
      <div class="sub-nav">
        <div class="arr"></div>
      </div>
    </nav>
    <script>
      var item = document.querySelectorAll(".nav-item");
      var title = document.querySelectorAll(".nav-item .nav-title");
      var list = document.querySelectorAll(".sub-list");
      var arr = document.querySelector(".arr");
      var nav = document.querySelector("nav");

      for (let i = 0; i < item.length; i++) {
				item[i].index = i;
				item[i].onmouseenter = function() {
                   
					for (let j = 0; j < list.length; j++) {
						list[j].classList.remove('active');
					}

					title[this.index].style.background = 'url("./img/nav_bg.png") no-repeat 0 -144px';
					list[this.index].classList.add('active');
                    //左右位置
					if (item[this.index].offsetLeft + list[this.index].offsetWidth > nav.offsetWidth) {
					
						list[this.index].style.right = 5 + 'px';
					} else {
						
						list[this.index].style.left = 0 + 'px';
					}
					arr.style.display = 'block';
					arr.style.left = item[this.index].offsetLeft + item[this.index].offsetWidth / 2 - 10 + 'px';
				};
                
				item[i].onmouseleave = function() {
					list[this.index].classList.remove('active');
					title[this.index].style = '';
					arr.style.display = 'none';
				};
			}
    </script>
  </body>
</html>
